<template>
  <div>
    <img
      :src="menuDefault"
      @click="toggleClick"
      class="hamburger width-16 height-15 mar-l-13"
      :class="{'is-active':isActive}" alt />
    <!-- <svg t="1614934524285" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5515" width="64" height="64">
      <path d="M906.19904 116.38784H115.92704c-34.31424 0-62.14656 27.83744-62.14656 62.17216v0.29696c0 34.33984 27.83232 62.17216 62.14656 62.17216h790.272c34.30912 0 62.15168-27.83744 62.15168-62.17216v-0.29696c0-34.33472-27.84256-62.17216-62.15168-62.17216z m-0.31744 331.05408H116.2496c-34.5088 0-62.46912 27.98592-62.46912 62.47424v0.49152c0 34.48832 27.9552 62.46912 62.46912 62.46912H905.8816c34.5088 0 62.46912-27.9808 62.46912-62.46912v-0.49152c0-34.48832-27.96032-62.47424-62.46912-62.47424z m0.31744 331.84768H115.92704c-34.31424 0-62.14656 27.84256-62.14656 62.17728v0.29696c0 34.33984 27.83232 62.17728 62.14656 62.17728h790.272c34.30912 0 62.15168-27.83744 62.15168-62.17728v-0.29696c0-34.33472-27.84256-62.17728-62.15168-62.17728z" p-id="5516" fill="#ffffff"></path>
    </svg> -->
  </div>
</template>

<script>
import menuDefault from '@/assets/images/icon-menu-2.png'
export default {
  name: 'hamburger',
  data() {
    return {
      menuDefault: menuDefault
    }
  },
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  cursor: pointer;
  transform: rotate(180deg);
  transition: .2s;
  transform-origin: 50% 50%;
}

.hamburger.is-active {
  transform: rotate(0deg);
}
</style>
